import React from 'react'

import { Form, Input, Tooltip, Icon, Cascader, Select, Row, Col, Checkbox, Button,Message,Upload,Radio,TreeSelect,DatePicker} from 'antd';
const FormItem = Form.Item;
const Option = Select.Option;
const RadioGroup = Radio.Group;
const CheckboxGroup = Checkbox.Group;
const { TextArea } = Input;
const SHOW_PARENT = TreeSelect.SHOW_PARENT;

import './index.less'

function getBase64(img, callback) {
  const reader = new FileReader();
  reader.addEventListener('load', () => callback(reader.result));
  reader.readAsDataURL(img);
}

function beforeUpload(file) {
  const isJPG = file.type === 'image/jpeg';
  if (!isJPG) {
    message.error('You can only upload JPG file!');
  }
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isLt2M) {
    message.error('Image must smaller than 2MB!');
  }
  return isJPG && isLt2M;
}

class UserForm extends React.Component {
  state = {
    confirmDirty: false,
  };
  handleSubmit = (e) => {
    const {finish} = this.props;

    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        finish();
        Message.success('创建用户信息成功!');
        console.log('Received values of form: ', values);
      }
    });
  }
  handleConfirmBlur = (e) => {
    const value = e.target.value;
    this.setState({ confirmDirty: this.state.confirmDirty || !!value });
  }
  checkPassword = (rule, value, callback) => {
    const form = this.props.form;
    if (value && value !== form.getFieldValue('password')) {
      callback('Two passwords that you enter is inconsistent!');
    } else {
      callback();
    }
  }
  checkConfirm = (rule, value, callback) => {
    const form = this.props.form;
    if (value && this.state.confirmDirty) {
      form.validateFields(['confirm'], { force: true });
    }
    callback();
  }

  handleChange = (info) => {
    if (info.file.status === 'done') {
      // Get this url from response in real world.
      getBase64(info.file.originFileObj, imageUrl => {
        this.setState({ imageUrl })
      });
    }
  }

  render() {
    const { getFieldDecorator,resetFields } = this.props.form;
    const { close , callbackParent } = this.props;
    const _this = this;
    const imageUrl = this.state.imageUrl;
    const plainOptions = [
      { label: '系统管理员', value: 1 },
      { label: '微信平台管理员', value: 2 },
      { label: '网站管理员', value: 3 },
    ];

    // 把重置表单的方法传给父亲
    callbackParent({
      resetFields:resetFields
    });

    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
    };
    const tailFormItemLayout = {
      wrapperCol: {
        xs: {
          span: 14,
          offset: 0,
        },
        sm: {
          span: 14,
          offset: 6,
        },
      },
    };    

    const treeDataRole = [{
      label: 'Node1',
      value: '0-0',
      key: '0-0',
      children: [{
        label: 'Child Node1',
        value: '0-0-0',
        key: '0-0-0',
      }],
    }, {
      label: 'Node2',
      value: '0-1',
      key: '0-1',
      children: [{
        label: 'Child Node3',
        value: '0-1-0',
        key: '0-1-0',
      }, {
        label: 'Child Node4',
        value: '0-1-1',
        key: '0-1-1',
      }, {
        label: 'Child Node5',
        value: '0-1-2',
        key: '0-1-2',
      }],
    }];

    const treeData = [{
      label: 'Node1',
      value: '0-0',
      key: '0-0',
      children: [{
        label: 'Child Node1',
        value: '0-0-1',
        key: '0-0-1',
      }, {
        label: 'Child Node2',
        value: '0-0-2',
        key: '0-0-2',
      }],
    }, {
      label: 'Node2',
      value: '0-1',
      key: '0-1',
    }];

    const tProps = {
      treeDataRole,
      value: ['0-0-0'],
      treeCheckable: true,
      showCheckedStrategy: SHOW_PARENT,
      searchPlaceholder: '请选择一个角色',
      treeCheckStrictly:true
    };
    return (
      <Form onSubmit={this.handleSubmit}>
        <FormItem
          {...formItemLayout}
          label="所属机构"
          hasFeedback
        >
          {getFieldDecorator('officeId', {
            rules: [ {
              required: true, message: '请选择一个机构后提交!',
            }],
          })(
            <TreeSelect
              dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
              treeData={treeData}
              placeholder="请选择一个机构"
              treeDefaultExpandAll
            />
          )}
        </FormItem>
        <FormItem
          {...formItemLayout}
          label={(
            <span>
              用户工号&nbsp;
              <Tooltip title="你所在公司的工号，没有可不填写">
                <Icon type="question-circle-o" />
              </Tooltip>
            </span>
          )}
          hasFeedback
        >
          {getFieldDecorator('no', {})(
            <Input type="text"/>
          )}
        </FormItem>
        <FormItem
          {...formItemLayout}
          label="姓名"
          hasFeedback
        >
          {getFieldDecorator('name', {
            rules: [{
              required: true, message: '请输入您的姓名后提交!',
            }],
          })(
            <Input type="text"/>
          )}
        </FormItem>
        <FormItem
          {...formItemLayout}
          label={(
            <span>
              登录名&nbsp;
              <Tooltip title="你登录时使用的帐号名，登录名不可修改且唯一">
                <Icon type="question-circle-o" />
              </Tooltip>
            </span>
          )}
          hasFeedback
        >
          {getFieldDecorator('nickname', {
            rules: [{ required: true, message: '请输入一个登录名!' }],
          })(
            <Input />
          )}
        </FormItem>
        <FormItem
          {...formItemLayout}
          label="生日"
          hasFeedback
        >
          {getFieldDecorator('brithday', {
            rules: [{
              required: true, message: '请选择一个出生年月日!',
            }],
          })(
            <DatePicker />
          )}
        </FormItem>
        <FormItem
          {...formItemLayout}
          label="用户角色"
        >
          {getFieldDecorator('userRoles', {
            rules: [{ required: true, message: '必须选择一个用户角色!' }]
          })(
            <TreeSelect {...tProps} />
          )}
        </FormItem>
        <FormItem
          {...formItemLayout}
          label="备注"
        >
          {getFieldDecorator('remarks')(
            <TextArea rows={4} />
          )}
        </FormItem>
        <FormItem {...tailFormItemLayout}>
          <div>
            <Button type="primary" htmlType="submit" style={{marginRight:'10px'}}>确定</Button>
            <Button onClick={close}>取消</Button>
          </div>
        </FormItem>
      </Form>
    );
  }
}

const WrappedUserForm = Form.create()(UserForm);
export default WrappedUserForm
